@let rightContent = builder.rightContent$ | async;
<div
  class="builder-wrapper relative flex"
  [ngClass]="{ dark: (builder.themeMode | async) === 'dark' }"
>
  <mat-drawer-container class="w-full">
    <mat-drawer
      #drawer
      class="sidebar-drawer"
      [(opened)]="sidebarDrawerOpened"
      mode="side"
      [ngClass]="sidebarDrawerOpened ? 'opened' : 'closed'"
    >
      <app-builder-sidebar [sidebarDrawer]="drawer" [drawerContentRef]="drawerContent" />
    </mat-drawer>
    <mat-drawer-content #drawerContent class="drawer-content">
      <div
        class="builder flex-1 overflow-auto h-full"
        [ngClass]="{ 'has-sidebar': !(builderFullScreen$ | async) }"
      >
        <mat-drawer-container [hasBackdrop]="rightContent?.hasBackdrop">
          <mat-drawer
            class="!fixed"
            [class]="rightContent?.classes"
            #builderRightDrawer
            [ngStyle]="{
              overflow: builderRightDrawer.opened ? 'visible' : 'auto',
            }"
            [mode]="rightContent?.mode || 'over'"
            position="end"
          >
            <div class="actions expand">
              <app-btn
                [matTooltip]="'收起'"
                (click)="onClose()"
                [content]="{
                  label: '',
                  mode: 'icon',
                  icon: { svg: 'chevron-right' },
                }"
              />
            </div>
            @if (builderRightDrawer.opened) {
              @if (rightContent) {
                <div [ngStyle]="rightContent.style">
                  @for (item of rightContent.elements; track item) {
                    <app-dynamic-component [inputs]="item" />
                  }
                </div>
              }
            }
          </mat-drawer>
          <mat-drawer-content>
            <router-outlet />
          </mat-drawer-content>
        </mat-drawer-container>
      </div>
    </mat-drawer-content>
  </mat-drawer-container>
</div>
